<template>
  <div class="home">

  </div>
</template>

<script>
// @ is an alias to /src
/*
   axios请求方法：get,post,put,patch,delete
   get:获取数据（课程列表、信息）
   post:提交数据（表单提交+文件上传）（一般用于新建）
   put:更新数据（所有数据推送到后端）
   patch:更新数据（只将修改的数据推送到后端）
   delete:删除数据
*/

import axios from 'axios'

export default {
  name: 'axios2-2',
  components: {

  },
  created () {
    //  http:localhost:8080/data.json?id=12
    axios.get('/data.json', {
      params: {
        id: 12
      }
    }).then((res) => {
      console.log(res)
    })
    axios({
      method: 'get',
      url: '/data.json',
      params: {
        id: 12
      }
    }).then(res => {
      console.log(res)
    })
    //post
    //form-data 表单提交（图片和文字上传）
    //appliction/json
    let data = {
      id: 12
    }
    axios.post('/post', data).then(res => {
      console.log(res)
    })
    axios({
      method: 'post',
      url: '/post',
      data: data
    }).then(res => {
      console.log(res)
    })
    //form-data
    let formData = new FormData()
    for (let key in data) {
      formData.append(key, data[key])
    }
    axios.post('/post', formData).then(res => {
      console.log(res)
    })
    // put请求
    axios.put('/put', data).then(res => {
      console.log(res)
    })
    //patch请求
    axios.put('/patch', data).then(res => {
      console.log(res)
    })
    //delete请求
    axios.delete('/delete', {
      params: {
        id: 12
      }
    }).then(res => {
      console.log(res)
    })
    axios.delete('/delete', {
      data: {
        id: 12
      }
    }).then(res => {
      console.log(res)
    })
    axios({
      method: 'delete',
      url: '/delete',
      params: {
        id: 12
      }
    }).then(res => {
      console.log(res)
    })
  },
}
</script>
